<template>
    <div class="basicSetup">
        <Row>
            <Col span="24">
                <h2 class="ivu-modal-header">常规设置</h2>
                <div class="mt-10">
                    <Form ref="conventionalRef" :model="conventionalForm" :rules="conventionalRule" :label-width=150  class="conventional-form">
                        <Form-item label="热门搜索关键字" prop="popularSearchKeyword" class="conventional-form-item">
                            <Input placeholder="请输入网站关键词" :maxlength=100 v-model="conventionalForm.popularSearchKeyword" style="width:400px"/>
                            <span class="conventional-propt">热门搜索关键字,请用空格分隔多个关键字,用于商城搜索栏关键词提示</span>
                        </Form-item>
                            <Form-item label="货币格式" prop="currencyFormat" class="conventional-form-item">
                            <Input placeholder="请输入货币+值，如：￥12" v-model="conventionalForm.currencyFormat" style="width:380px"/> 元
                            <span class="conventional-propt">显示商品价格的格式，%s将被替换为相应的价格数字。</span>
                        </Form-item>
                        <Form-item label=" 退货上传图片凭证" class="conventional-form-item">
                            <InputNumber v-model="conventionalForm.refundImgLimit" :min="1" @handleChange="changeCredentials"></InputNumber>
                            <span class="conventional-propt">设置退换货上传图片凭证数量限制</span>
                        </Form-item>
                        <Form-item label=" 商品评价是否需要审核" prop="evaluationAudit" class="conventional-form-item">
                            <i-switch v-model="conventionalForm.evaluationAudit" size="large" @on-change="changeAudit">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </i-switch>
                        </Form-item>
                        <Form-item label=" 商品默认图片" prop="url" class="conventional-form-item">
                            <Upload action=""  :before-upload="beforeUploadImg">
                                <i-button icon="ios-cloud-upload-outline">选择上传文件</i-button>
                                <span>只能上传jpg/png/jpeg文件，且不超过50kb</span>
                            </Upload>
                            <div class="demo-upload-list">
                                <img :src="conventionalForm.url" alt="">
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-trash-outline" @click.native="handleRemove(conventionalForm.url, 'img')"></Icon>
                                </div>
                            </div>
                        </Form-item>
                    </Form>
                </div>
            </Col>
            <Col span="24" class="ta-c">
                <Button type="primary" @click.native="submitBasic('conventionalRef')">提交</Button>
                <Button @click.native="closeBasic">取消</Button>
            </Col>
        </Row>
        <Spin size="large" fix v-show="showSpin">
            请稍后....
        </Spin>
    </div>
</template>
<script>
export default {
    name: 'basicSetup',
    props: ['shopIds'],
    data () {
        return {
            showSpin: false,
            shopId: '',
            // 常规设置 start
            conventionalForm: {
                url: '', // 图片地址
                shopLogo: '', // 图片id
                popularSearchKeyword: '', // 热门搜索关键字
                currencyFormat: '', // 货币格式
                refundImgLimit: 1, // 退货上传图片凭证
                evaluationAudit: false // 商品评价审核
            }, // 要提交的表单
            conventionalRule: {
                popularSearchKeyword: [
                    { required: true, message: '请输入网站关键词', trigger: 'blur' },
                    { pattern: /^[\u4e00-\u9fa5A-Za-z0-9 \s，。？/ @ # ￥ % …… & - = + （ ） ( ) ^ ！!]*$/, message: '标题输入仅限中英文及数字', trigger: 'blur' }
                ],
                currencyFormat: [
                    { required: true, message: '请输入货币+值，如：￥12', trigger: 'blur' },
                    { pattern: /^[0-9￥$]*$/, message: '标题输入货币及数字', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请上传图片', trigger: 'blur' }
                ]

            } // 表单验证
            // 常规设置 end

        };
    },
    mounted () {
        this.shopId = this.$route.query.id;
        console.log(this.shopIds, '店铺id');
        this.findShop();
    },
    created () {
        console.log(this.shopId, 'shopId');
    },
    methods: {
        findShop () {
            depot.get({
                url: this.URL.EC_SELLER.SHOP_FIND_ID + '?id=' + this.shopId,
                cb: (data) => {
                    if (data.code === 0) {
                        this.conventionalForm = data.data;
                        console.log(this.conventionalForm, 'conventionalFormconventionalForm');
                    }
                },
                ce: (error) => {
                    this.$Message.error(data.message);
                }
            });
        },
        // 商品评价是否需要审核
        changeAudit (status) {
            this.conventionalForm.evaluationAudit = status;
        },
        // 退货上传图片凭证
        changeCredentials (value) {
            this.conventionalForm.refundImgLimit = value;
        },
        // 图片上传
        beforeUploadImg (file) {
            console.log(file, '123');
            this.beforeUpload(file, 'img');
        },
        beforeUpload (file, type) {
            let vue = this;
            if (type === 'img') {
                if (!/image\/\w+/.test(file.type)) {
                    vue.$Message.error('请确保文件为图像类型');
                    return;
                }
            }
            if (file) {
                vue.showSpin = true;
                let reader = new FileReader();
                reader.onloadend = function () {
                    /* this从vue实例变为reader */
                    let submitData = new FormData();
                    submitData.append('file', file);
                    // let vue = this;
                    depot.post({
                        url: vue.URL.DOCUMENT.UPLOAD_DOCUMENT,
                        data: submitData,
                        cb: (data) => {
                            if (data.code === 0) {
                                vue.$Message.success('图片上传成功');
                                vue.showSpin = false;
                                if (type === 'img') {
                                    vue.conventionalForm.url = data.data.accessUrl;
                                    vue.conventionalForm.shopLogo = data.data.id;
                                }
                            } else {
                                vue.$Message.error(data.message);
                            }
                        },
                        ce: (error) => {
                        }
                    });
                };
                if (file) {
                    reader.readAsDataURL(file);
                }
            }
        },
        // 删除上传的图片
        handleRemove (file, index) {
            console.log(file.length, 'this.$refs.upload');
            // const fileList = this.$refs.upload.fileList;
            this.conventionalForm.url = '';
            this.conventionalForm.shopLogo = '';
        },

        // 提交商城基础设置
        submitBasic (name) {
            let data = {};
            // this.showSpin = true;
            // 常规设置
            this.$refs[name].validate((valid) => {
                console.log(1245);
                let vue = this;
                vue.conventionalForm.shopId = this.shopId;
                if (valid) {
                    this.showSpin = true;
                    console.log(this.URL.EC_SELLER.UPDATE_SHOP_SETTINGS, '0000');
                    depot.post({
                        url: vue.URL.EC_SELLER.UPDATE_SHOP_SETTINGS,
                        data: vue.conventionalForm,
                        cb: (data) => {
                            // this.showSpin = false;
                            if (data.code === 0) {
                                this.$Message.success('提交成功');
                                this.showSpin = false;
                                // this.findShop();
                            } else {
                                // this.$Message.error(data.message);
                                this.showSpin = false;
                            }
                        }
                    });
                } else {
                    this.$Message.error('请检查输入的内容是否有误');
                }
            });
        },
        // 取消提交商城基础设置
        closeBasic () {

        }

    },
    watch: {
        shopIds (newVal, oldVal) {
            if (newVal) {
                this.shopId = newVal;
                this.findShop();
            }
            console.log(this.shopId, 'basic');
        }
    }
};
</script>
<style lang="less" scoped>
.basicSetup {
    min-width: 980px;
        /deep/.ivu-tabs{
           overflow: -webkit-paged-x !important;
        }
        /deep/.ivu-btn{
            width: 100px;
        }
    .conventional-form {
        width: 1000px;
        .conventional-form-item {
            .conventional-propt {
                float: right;
            }
            img{
                width: 100px;
                height: 100px;
            }
        }
        /deep/.ivu-upload{
            display: inline;
        }
    }
    .demo-upload-list{
        display: inline-block;
        text-align: center;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff; 
        font-size: 95px;
        cursor: pointer;
        margin: 0 2px;
    }
    /deep/.ql-editor{
        height: 500px;
        overflow-y: auto;
    }
}
</style>

